<template>
  <view class="relative flex-row flex-center justify-between padding-tb-20 padding-left-30" :class="{'border-bottom': border}" @click="$emit('click')">
    <view class="block" />
    <view class="flex-row align-center">
      <slot>
        <text class="text-32 color-t1">{{title}}</text>
      </slot>
    </view>
    <slot name="right" />
  </view>
</template>

<script setup lang="ts">
interface IProps{
  title: string,
  border: boolean
}

withDefaults(defineProps<IProps>(), {
  title: '',
  border: true
})

const $emit = defineEmits(['click'])
</script>

<style scoped lang="scss">
.block{
  width: 8rpx;
  height: 32rpx;
  background: $color-fourth;
  border-radius: 4rpx;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.border-bottom{
  border-bottom: 2rpx solid $color-border;
}
</style>
